<template>
  <div class="box">
    <h2>测试题</h2>
    <div class="subject" v-for="(item, index) in list" :key="index">
      <span>{{ item.num1 }}</span>
      <span>+</span>
      <span>{{ item.num2 }}</span>
      <span>=</span>
      <input type="text" v-model.number="item.result" />
      <button @click.prevent="sum(index)" :disabled="item.submitted">
        提交
      </button>
    </div>
    <br />

    <div>
      <span
        v-for="(item, ind) in list"
        :key="ind"
        :class="{
          right: item.status === '正确',
          error: item.status === '错误',
          undo: item.status === '未完成',
        }"
        >{{ ind + 1 }}: {{ item.status }}</span
      >
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: Array,
  },
  data() {
    return {
      result: '',
    }
  },
  methods: {
    sum(index) {
      if (this.list[index].result == '') {
        return
      }

      if (
        this.list[index].result ==
        this.list[index].num1 + this.list[index].num2
      ) {
        this.list[index].status = '正确'
        this.list[index].submitted = true
      } else {
        this.list[index].status = '错误'
      }
    },
  },
}
</script>
<style scoped>
.box {
  height: 500px;
  width: 350px;
  background: rgb(242, 0, 255);
  margin: auto;
  padding: 0;
}
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject > span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
body {
  background-color: #eee;
}
</style>
